<template>
    <div class="login_container">
        <div class="login_box">
            <div class="img_box">
                <img src="../assets/img/呵呵.jpg" alt="死去吧！">
            </div>

            <div>
                <el-form label-width="0px" class="login_form">
                    <el-form-item>
                        <el-input v-model="loginForm.name"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="loginForm.password"></el-input>
                    </el-form-item>
                    <el-form-item class="btns">
                        <el-button type="primary" @click="login">提交</el-button>
                        <el-button type="info">重置</el-button>
                    </el-form-item>
                </el-form>


            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                loginForm:{
                    name:'zwj',
                    password:'111'
                }
            }
        },
        methods: {
            async login(){
                //console.log(this.loginForm)
                //const res = this.$http.post("user/testCon",{});
                //console.log(res)

                //const res =await this.$http.post('/user/login',this.loginForm)
                //console.log(res)
                //alert('welcome:'+res.data.data.name)
                const {data:res} =await this.$http.post('/user/login',this.loginForm)
                alert('welcome:'+res.data.name)
            }
        }
    }
</script>

<style lang="less" scoped>
    .login_container {
        background-color: rgb(233, 123, 187);
        height: 100%;
    }

    .login_box {
        width: 50%;
        height: 40%;
        background-color: chartreuse;
        border-radius: 3px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    .img_box {
        width: 180px;
        height: 180px;
        border: 1px solid #eeeeee;
        border-radius: 50%;
        padding: 11px;
        position: absolute;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: chartreuse;
        box-shadow: 0 0 11px gray;

        img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background-color: gray;
        }
    }

    .login_form {
        width: 100%;
        padding: 24px;
        position: absolute;
        bottom: 0;
        box-sizing: border-box;
    }

    .btns {
        display: flex;
        justify-content: flex-end;
    }
</style>